<template>
	<view>
		<view class="All">
			<view class="center-item">

			</view>
			<view class="center-items">
				<image :src="userinfo.avatarUrl"></image>
				<p class="txt1">{{cj.zf}}分</p>
				<p class="txt2">本次得分</p>
				<view class="center-item-cq">
					<view class="box1">
						<p class="p1">{{cj.dadui}}道</p>
						<p class="p2">本次答对题</p>
					</view>
					<view class="box2">

					</view>
					<view class="box3">
						<p class="p1">{{cj.ct}}题</p>
						<p class="p2">本次答错题</p>
					</view>
				</view>
				<view class="footer">
					<button @click="tzzjx">返回章节练习</button>
					<p @click="ckct">查看错题</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState('users', ['userinfo', 'cj'])
		},
		methods: {
			// 跳转章节练习
			tzzjx() {
				uni.switchTab({
					url: "/pages/lianxi/lianxi"
				})
			},
			// 跳转查看错题
			ckct(){
				uni.navigateTo({
					url:"/subpkg/cthz/cthz"
				})
			}
		}
	}
</script>

<style lang="scss">
	.p1 {
		// font-weight: 550;
		font-size: 20px;
	}

	.p2 {
		color: lightgray;
		margin-top: 10px;
	}

	image {
		height: 60px;
		width: 60px;
		border-radius: 100%;
		margin-top: -30px;
	}

	.All {
		background-color: rgb(247, 246, 249);

		.center-item {
			background-color: #1e90ff;
			height: 200px;
			border-bottom-left-radius: 4%;
			border-bottom-right-radius: 4%;
		}

		.center-items {
			.txt1 {
				color: red;
				font-size: 30px;
				margin-top: 10px;
			}

			.txt2 {
				// font-weight: 550;
				margin-top: 10px;
			}

			text-align: center;
			width: 90%;
			height: 500px;
			background-color: white;
			margin-top: -120px;
			margin-left: 5%;

			.center-item-cq {
				margin-top: 15%;
				display: flex;
				justify-content: space-around;

				.box1 {
					margin-left: 30px;

				}

				.box2 {
					border-left: 1px solid lightgray;
					height: 40px;
				}

				.box3 {
					margin-right: 30px;
				}
			}

			.footer {
				margin-top: 150px;

				button {
					width: 70%;
					background-color: #1e90ff;
					color: white;
				}

				p {
					margin-top: 10px;
					color: lightgray;
				}
			}
		}
	}
</style>